<!DOCTYPE html>
<html>
<head>
	<title>演示</title>
	<meta charset="utf-8">
	<link rel="icon" href="picture/icon.png" type="image/png" sizes="64x64">
	<script>
		function reflsh(){
			var textContent = document.getElementById('editor-textarea').value;
			document.getElementById('viewer').srcdoc = textContent;
		}
	</script>
	<style>
	::selection {background:green;
					  color:white;
		}
		*{padding: 0;
		   margin: 0;
		}
		 .main{
		 	background-color:#333641;
		 	width: 100%;
		 	height: 100%;
		 	display: inline-flex;
		 }
		 #editor-textarea{
		 	resize: none;
		 	background-color:#1D1E22;
		 	color: white;
		 	font-size:14px;
		 	font-family:Consolas;
		 	width: 50%;
		 	/*增加了识别页面高度的函数*/
		 	height: calc(100vh - 20px);
		 	margin: 2px;
		 	padding: 5px;
		 	border: 2px solid #3C3F49;
		 	outline: none;
		 }
		  #viewer{
		 	background:white;
		 	width: 100%;
		 	/*增加了识别页面高度的函数*/
		 	height: calc(100vh - 4px);
		 	margin: 0px;
		 	border: 2px solid #3C3F49;
		 }
		 .fix-back{
		 	position: absolute;
		 	top: 2px;
		 	left: calc(30%);
		 	width: 40px;
		 	height: 40px;
		 }
		 #back{
		 	font-family:Consolas;
		 	text-decoration: none;
		 	font-size: 20px;
		 	color:rgba(255,0,0,0.5);
		 }
		 #back:hover{
		 	color:rgba(255,0,0,0.9);
		 }
	</style>

</head>
<body>
	<div class="main">
		<div class="fix-back"><a id="back" href="navigation.html" target="_self">back</a></div>
		<textarea id="editor-textarea" onkeyup="reflsh()" placeholder="code here..."></textarea>
		<iframe id="viewer"></iframe>

	</div>
</body>
</html>